<template>
	<view class="">
		<view class="container">
			<view class="list">
				<view class="item">
					<view class="t">选择类型</view>
					<view class="b1 u-flex u-col-center u-row-between">
						<view class="i" :class="{ on: params.type == 1 }" @click="changeType(1)">我要收购</view>
						<view class="i" :class="{ on: params.type == 2 }" @click="changeType(2)">我要出售</view>
					</view>
				</view>
				<view class="item">
					<view class="t">商品名称</view>
					<view class="b">
						<input type="text" v-model="params.name" placeholder="请输入" placeholder-style="color:#D1CDCD;font-size: 28rpx;" maxlength="20" />
					</view>
					<view class="searchbtns">
						<view class="btns">
							<view class="itmes flex" v-for="(item, index) in searchList" :key="index" @click="toSearch(item.word)">
								<image  :src="item.icon" mode="aspectFill"></image>
								<view class="">
									{{ item.word }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="params.type == 2">
					<view class="t">价格模式</view>
					<view class="bbtns u-flex">
						<view class="bbtn" :class="params.priceMode == 1 ? 'actbbtn' : ''" @click="btnchange(1)">买家出价</view>
						<view class="bbtn" :class="params.priceMode == 2 ? 'actbbtn' : ''" @click="btnchange(2)">卖家定价</view>
					</view>
				</view>
				<view class="item">
					<view class="item_flex">
						<view class="t">
							价格
							<text>{{ params.priceUnit == 0 ? '(MHB)' : '(元)' }}</text>
						</view>
						<view class="u-flex">
							<view class="ttt" :style="{ color: params.priceUnit == 0 ? '#FF6F07' : '' }" @click="changetypes(0)">
								<image v-if="params.priceUnit == 0" src="/static/c6.png" mode=""></image>
								<image v-else src="/static/c1.png" mode=""></image>
								MHB
							</view>
							<view :style="{ color: params.priceUnit == 1 ? '#FF6F07' : '' }" style="margin-left: 30rpx" class="ttt" @click="changetypes(1)">
								<image v-if="params.priceUnit == 1" src="/static/c6.png" mode=""></image>
								<image v-else src="/static/c1.png" mode=""></image>
								元
							</view>
						</view>
					</view>
					<view class="text_red">
						<text v-if="params.priceUnit == 0">您已选择梦幻币模式结算，对方将在游戏里与您交易</text>
						<text v-if="params.priceUnit == 1">您已选择现金模式结算，对方将在小程序与您交易</text>
					</view>
					<view class="b" v-if="params.priceMode != 1">
						<input
							type="number"
							v-model="params.price"
							placeholder="请输入"
							maxlength="9"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;font-weight: 400;"
							class="nn"
						/>
						<view class="big" v-if="params.price">
							{{ getBig }}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="t">图片</view>
					<view class="img" v-if="params.image" @click="upload">
						<image :src="params.image" mode="aspectFill" class="i1"></image>
						<image @click.stop="params.image = ''" src="../../static/del.png" mode="aspectFill" class="i3" v-if="params.image"></image>
					</view>
					<view class="img" v-else @click="upload">
						<image src="../../static/up2.png" mode="aspectFill" class="i2"></image>
					</view>
				</view>
				<view class="item">
					<view class="t">上架天数</view>
					<view class="b3">
						<slider
							:min="1"
							:max="30"
							@change="sliderChange"
							step="1"
							activeColor="#FF6F07"
							backgroundColor="#D1D1D6"
							block-color="#fff"
							block-size="18"
							:value="params.upday"
						/>
						<view class="i i1">1</view>
						<view class="i i2" :style="{ left: left + '%' }">
							{{ params.upday }}
						</view>
						<view class="i i3">30</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" @click="gopage()">
			<view class="cont">
				<view class="btn">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
import { gethot } from '@/common/http.api.js';
export default {
	data() {
		return {
			left: 3,
			params: {
				image: '',
				name: '',
				price: '',
				type: 1,
				upday: 1,
				priceUnit: 0, //0梦幻币 1人民币
				priceMode: 2 //type为1时为0，type为2时：1买家出价 2卖家定价
			},
			searchList: []
		};
	},
	onLoad() {
		this.getddd();
	},
	computed: {
		getBig() {
			return this.$numberToChinese(this.params.price, this.params.priceUnit);
		}
	},
	methods: {
		btnchange(t) {
			this.params.priceMode = t;
			if (t == 1) {
				this.params.price = 0;
			} else {
				this.params.price = '';
			}
		},
		toSearch(name) {
			this.params.name = name;
		},
		changeType(i) {
			this.params.type = i;
			this.params.name = '';
			this.params.price = '';
			if (i == 2) {
			} else {
				this.params.priceMode = 2;
			}
		},
		getddd(type) {
			gethot().then((res) => {
				if (res.code == 200) {
					this.searchList = res.data;
				}
			});
		},
		changetypes(i) {
			if (i == 1) {
				uni.showModal({
					title: '温馨提示',
					content: `该功能仅支持“梦幻商人”微信小程序使用`,
					success: (res) => {
						if (res.confirm) {
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			this.params.priceUnit = i;
		},
		upload() {
			this.$uploadone().then((res) => {
				this.params.image = res;
			});
		},
		gopage(url) {
			if (!this.params.name) {
				this.$modal.msg('请输入商品名称');
				return;
			}
			if (this.params.priceMode == 2) {
				if (!this.params.price) {
					this.$modal.msg('请输入价格');
					return;
				}
			}
			if (!this.params.upday) {
				this.$modal.msg('请选择天数');
				return;
			}
			uni.setStorageSync('releaseData', this.params);
			uni.navigateTo({
				url: '/pages/user/release2'
			});
		},

		sliderChange(e) {
			this.params.upday = e.detail.value;
			this.left = (this.params.upday / 30) * 100;
		}
	}
};
</script>

<style lang="scss" scoped>
$color: #ff6f07;

.container {
	padding: 20rpx 30rpx;

	.on {
		opacity: 1;
	}

	.list {
		padding-bottom: 200rpx;
		.searchbtns {
			overflow: auto;
			height: 300rpx;
			.btns {
				display: flex;
				flex-wrap: wrap;
				.itmes {
					height: 60rpx;
					background: #f2f2f2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 0rpx 15rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #777777;
					line-height: 60rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					image {
						width: 44rpx;
						height: 44rpx;
						border-radius: 8rpx;
						margin-right: 14rpx;
					}
				}
			}
		}
		.item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			position: relative;
			.bbtns {
				margin-top: 20rpx;
				.bbtn {
					width: 200rpx;
					height: 60rpx;
					background: #f9f9f9;
					border-radius: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #11192d;
					text-align: center;
					line-height: 60rpx;
					margin-right: 40rpx;
				}
				.actbbtn {
					background: linear-gradient(180deg, #ffbf7d 0%, #ff8935 100%);
					color: #ffffff;
				}
			}
			.btns {
				display: flex;
				flex-wrap: wrap;
				.itmes {
					height: 48rpx;
					background: #f2f2f2;
					border-radius: 8rpx;
					padding: 0rpx 15rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #777777;
					line-height: 48rpx;
					margin-top: 15rpx;
					margin-right: 20rpx;
				}

				// .actitmes{
				// 	background: #FF6F07;
				// 	color: #FFFFFF;
				// }
			}
			.item_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 6rpx;
				}

				.ttt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #11192d;
					display: flex;
					align-items: center;
				}
			}

			.text_red {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #fe1515;
			}

			.s-list {
				position: absolute;
				left: 2rpx;
				right: 2rpx;
				top: 140rpx;
				background-color: #fff;
				border-radius: 0 0 20rpx 20rpx;
				box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);
				z-index: 999;
				border: 2rpx solid #f4f4f4;
				padding: 0 30rpx;

				.i {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #979797;
				}
			}

			.b3 {
				margin-top: 20rpx;
				position: relative;
				padding-bottom: 30rpx;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: 8rpx;
					width: 4rpx;
					height: 20rpx;
					margin-left: -10rpx;
					background-color: $color;
				}

				.i {
					color: #11192d;
					font-size: 28rpx;
				}

				.i1 {
					position: absolute;
					left: 0;
					top: 0;

					&::after {
						content: '';
						position: absolute;
						left: 30rpx;
						top: 8rpx;
						width: 4rpx;
						height: 20rpx;
						background-color: $color;
					}
				}

				.i2 {
					position: absolute;
					// right: 0;
					top: 45rpx;
					margin-left: -20rpx;
				}

				.i3 {
					position: absolute;
					right: -10rpx;
					top: 0;

					&::after {
						content: '';
						position: absolute;
						right: 40rpx;
						top: 8rpx;
						width: 4rpx;
						height: 20rpx;
						background-color: $color;
					}
				}
			}

			.t {
				font-size: 32rpx;
				color: #11192d;
				height: 50rpx;
				line-height: 50rpx;

				text {
					font-size: 20rpx;
				}
			}

			.img {
				margin-top: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				border: 2rpx solid #d1cdcd;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: relative;

				.i1 {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					overflow: hidden;
				}

				.i2 {
					width: 48rpx;
					height: 48rpx;
				}

				.i3 {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.b1 {
				margin-top: 20rpx;

				.i {
					width: 300rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #f9f9f9;
					border-radius: 12rpx;
					color: #d1cdcd;
					font-size: 28rpx;
					border: 1px solid #f9f9f9;
				}

				.on {
					background: #fff2e9;
					border: 1px solid $color;
					color: $color;
				}
			}

			.b {
				margin-top: 10rpx;
				input {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					color: #11192d;
					font-size: 28rpx;
				}

				textarea {
					width: 100%;
					height: 80rpx;
					line-height: 40rpx;
					color: #11192d;
					font-size: 28rpx;
				}

				.nn {
					font-family: 'DINB';
					font-size: 36rpx;
					font-weight: 600;
				}

				.big {
					line-height: 28rpx;
					height: 28rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					text-align: left;
				}
			}
		}
	}
}
</style>
